<!-- =======================================================
  * Author: Jéssica Yang
  ======================================================== -->

<template>
  <div>
    <el-container>

      <!-- ======= El-Header 顶栏容器 ======= -->
      <el-header id="header" class="fixed-top">
        <div class="header d-flex align-items-center">
          <h1>Medical Pro</h1>
          <!-- ======= navbar ======= -->
          <nav class="navbar">
            <ul>
              <router-link to="/MainPage/Clock" class="mainpage">Console</router-link>
              <router-link to="/Login" class="login">Login</router-link>
            </ul>
          </nav>
          <!-- navbar -->
        </div>
      </el-header>
      <!-- End El-Header -->

      <!-- ======= Hero Section ======= -->
      <section class="hero d-flex align-items-center0" :style="hero">
        <div class="container">
          <div class="row">
            <div class="col-lg-6 d-flex flex-column justify-content-center pt-4">
              <h1>公立医院服务系统</h1>
            </div>
          </div>
        </div>
      </section>
      <!-- End Hero -->

      <!-- ======= El-Main 主要区域容器 ======= -->
      <el-main class="main">

        <!-- ======= Search Section ======= -->
        <section id="search" class="search">
          <div class="search-newsletter">
            <div class="container">
              <h4>查询</h4>
              <p>请使用部门查询或者关键字查询</p>
              <div >
                <div class="col-lg-6" style="display: flex; justify-content: space-evenly;text-align: center">
                  <el-form class="form" style="display: inline-block; width: 400px">
                    <DepSelect style="width: 280px"></DepSelect>
                    <el-button class="search-button" @click = "loadDep">搜索</el-button>
                  </el-form>
                  <el-form class="form" style="display: inline-block;width: 400px">
                    <el-input v-model="hospital" clearable style="width: 280px"></el-input>
                    <el-button class="search-button" @click = "load">搜索</el-button>
                  </el-form>
                </div>
              </div>

              <!--医疗机构列表-->
              <el-table style="margin-top: 30px" :data="tableData" height="520px">
                <el-table-column type="index" width="40" align="center"></el-table-column>
                <el-table-column prop="hcode" label="医疗机构编码" align="center"></el-table-column>
                <el-table-column prop="hospital" width="700" label="医疗机构" align="center"></el-table-column>
                <el-table-column prop="hrank" label="医疗机构等级" align="center"></el-table-column>
                <el-table-column label="详细信息" align="center">
                  <div class="operation_show" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-search" @click="checkOne(scope.row.hcode)">查看</el-button>
                  </div>
                </el-table-column>
              </el-table>

              <!--分页块-->
              <div>
                <el-pagination
                    style="margin-top: 10px"
                    align="center"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagenum"
                    :page-sizes="[10,20,30,40,50]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>

              </div>


              <!--详细信息查看对话框-->
              <el-dialog title="医疗机构详细信息查看" :visible.sync="checkVisible">
                <!--描述列表-->
                <el-descriptions :column="1" :colon="false"  border label-style="width: 200px">
                  <el-descriptions-item label="医疗机构名称">{{this.check.hospital}}</el-descriptions-item>
                  <el-descriptions-item label="医院地址">{{this.check.address}}</el-descriptions-item>
                  <el-descriptions-item label="医生人数">{{this.check.doctornum}}</el-descriptions-item>
                </el-descriptions>
              </el-dialog>
            </div>
          </div>
        </section>
        <!-- End Search -->

        <!-- ======= Map Section ======= -->
        <section id="map" class="map" style="margin-bottom: 10px">
          <div class="map-newsletter">
            <div class="container">
              <h4>地图</h4>
            </div>
          </div>
          <div id="Map1">
            <Map />
          </div>
        </section>

        <!-- End Map -->
      </el-main>
      <!-- End El-Main -->

      <!-- ======= El-Footer 底部容器 ======= -->
      <el-footer class="footer">

          <div class="container footer-bottom">
            <div class="group">
              <strong><span>13组：</span></strong> 饶特 杨倩茹 聂仁珩
            </div>
          </div>

      </el-footer>
      <!-- End El-Footer -->

    </el-container>

    <div class="location_box">
      <ul>
        <li>
          <div class="item">
            <!--点击按钮定位到查询模块-->
            <el-button icon="el-icon-search" class="searchbutton" circle @click="getScroll('#search')"></el-button>
          </div>
        </li>
        <li>
          <div class="item">
            <!--点击按钮定位到地图模块-->
            <el-button icon="el-icon-map-location" class="mapbutton" circle @click="getScroll('#map')"></el-button>
          </div>
        </li>
        <li>
          <div class="item">
            <!--联系管理员-->
            <el-tooltip placement="left">
              <div slot="content">请联系管理员：1627628102</div>
              <el-button icon="el-icon-phone" class="qqbutton" circle></el-button>
            </el-tooltip>
          </div>
        </li>
      </ul>
      <!--回到顶部-->
      <el-backtop :visibility-height="0"><i class="el-icon-top" style="color: black"></i></el-backtop>
    </div>

  </div>
</template>

<script>
import Map from "@/components/Map";
import DepSelect from "@/components/DepSelect";
export default {
  name: "Home",
  components: {Map,DepSelect},
  data(){
    return{
      hero:{
        backgroundImage: "url("+require('../assets/frontPageImage.png')+")",
        backgroundSize: '100% 100%'
      },
      hospital: '',
      checkVisible: false,
      check:{},
      currentPage:1,
      tableData: [],
      total:0,
      pagenum:1,
      pagesize:10,
      did: null,
      active:''
    }
  },
  created() {
    this.load()     //网页创建时加载数据
    this.getTableHeight();    //网页创建时获得表格高度
    this.$bus.$on('transferId',(data)=>{
      console.log('我是dl组件，收到了数据',data)
      this.did = data
    })
  },
  mounted () {   //监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
    let _this = this;
    window.onresize = () => {
      if (_this.resizeFlag) {
        clearTimeout(_this.resizeFlag);
      }
      _this.resizeFlag = setTimeout(() => {
        _this.getTableHeight();
        _this.resizeFlag = null;
      }, 100);
    };
  },
  methods:{
    getTableHeight() {
      let tableH = 206; //距离浏览器底部的距离
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },

    //分页查询
    handleSizeChange(pagesize) {   //每页条数改变时触发
      console.log(pagesize)
      this.pagesize = pagesize
      this.load()
    },
    handleCurrentChange(pagenum) {   //当前页码改变时触发
      console.log(pagenum)
      this.pagenum = pagenum
      this.load()
    },
    load(){
      this.request.get("/hospital/hospitalPage",{params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          hospital: this.hospital
        }})
          .then(res=>{
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
    },
    loadDep(){
      if (this.did === undefined)
        this.$message.warning("未选中任意一个部门")
      else {
        this.request.get("/hospital/hospitalPageByDep",{params: {
            pagenum: this.pagenum,
            pagesize: this.pagesize,
            did: this.did
          }})
            .then(res=>{
              if (res.data.code === '200'){
                console.log(res);
                this.tableData = res.data.data.records
                this.total = res.data.data.total
              }
              else
                this.$message.warning("暂时查询不到该部门下的机构情况")
            })
      }
    },
    checkOne(hcode){
      this.request.get('/hospital/checkOne/' + hcode).then(res=>{
        if (res.data.code === '200'){
          this.check = res.data.data;
          this.checkVisible = true
        }
        else{
          this.$message.error(res.data.msg)
        }
      })
    },
    handleScroll(){
      const selectHeader = document.getElementById("header") //根据id选择
      if(window.scrollY > 100){  //若滚动距离顶部大于100，给顶栏容器加上header-scrolled的css，即加上颜色
        selectHeader.classList.add("header-scrolled")
      }else{    //否则header-scrolled不起效
        selectHeader.classList.remove("header-scrolled")
      }
    },
    getScroll(idName){
      document.querySelector(idName).scrollIntoView({behavior: "smooth"})
    }
  },
  beforeDestroy() {
    this.$bus.$off('transferId')
  },
  destroyed() {  //离开该页面时移除监听事件
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style>
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Jost:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i);

.operation_show{
  display: none;
}
.el-table__body tr:hover > td .operation_show{
  display: block;
}
/*字体样式*/
body {
  font-family: "Jost", sans-serif;
}
h1, h2, h3, h4, h5, h6, p {
  font-family: "Jost", sans-serif;
}

.container{
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}
.d-flex{
  display: flex !important;
}
.align-items-center{
  align-items: center !important;
}
.flex-column {
  flex-direction: column !important;
  margin-left: 70px;
}
.justify-content-center {
  justify-content: center !important;
}
.pt-4 {
  padding-top: 15rem !important;
}
section {
  overflow: hidden;
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.row .col-lg-6{
  flex: 0 0 auto;
  width: 50%;
}

/*顶栏容器样式*/
.header{
  width: 100%;
  transition: all 0.5s;
  z-index: 997;
}
/*滚动后触发的header样式*/
.header-scrolled{
  background-image: linear-gradient(to right, #3c99e5, #b1dff6)
}
/*顶栏容器固定*/
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
/*顶栏容器的h1标题样式*/
.header h1{
  font-size: 30px;
  color: #fff;
  margin-top: 10px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-right: auto !important;
  margin-left: 70px;
}
/*导航菜单样式*/
.navbar{
  padding: 0;
}
.navbar ul{
  margin-top: 8px;
  display: flex;
  list-style: none;
  align-items: center;
  margin-right: 50px
}
/*主页路由链接router-link样式*/
.mainpage {
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  font-family: "Jost", sans-serif;
}
/*登录路由链接router-link样式*/
.login{
  text-decoration: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  font-family: "Jost", sans-serif;
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 50px;
  border: 2px solid white;
  font-weight: 600;
}
.login:hover,
.login:focus{
  color: #fff;
  background: #64b1eb;
}

/*Hero样式*/
.hero{
  width: 100%;
  height: 100vh;
}
.hero .container{
  padding-top: 72px;
}
/*Hero的h1标题样式*/
.hero h1{
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #fff;
}

/*主要区域容器样式*/
.main{
  padding: 0;
}
/*搜索Section样式*/
.search{
  font-size: 14px;
  padding: 0;
}
.search .search-newsletter{
  padding: 70px 0;
  background: #f3f5fa;
  text-align: center;
  font-size: 15px;
  color: #444444;
}
/*Search的h4标题样式*/
.search .search-newsletter h4{
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  color: #37517e;
}
/*Search的搜索表单样式*/
.form{
  margin-top: 30px;
  padding: 6px 10px;
  position: relative;
  text-align: left;
}

/*搜索按钮样式*/
.search-button,
.search-button:hover,
.search-button:focus{
  background: #64b1eb;
  color: #fff;
  margin-left: 10px
}

/*地图Section样式*/
.map{
  padding: 0;
  height: 120vh;
}
#Map1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 1px;
}
.map .map-newsletter{
  padding: 70px 0;
  background: #f3f5fa;
  text-align: center;
  font-size: 15px;
  color: #444444;
}
/*地图的h4标题样式*/
.map .map-newsletter h4{
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  color: #37517e;
}

/*底部容器样式*/
.footer {
  font-size: 14px;
  background-image: linear-gradient(to right, #3c99e5, #b1dff6)
}
.footer .footer-bottom {
  padding-top: 20px;
  padding-bottom: 30px;
  color: #fff;
}
/*小组信息样式*/
.footer .group {
  float: left;
  margin-left: 60px;
  font-family: "Jost", sans-serif;
}

/*锚点定位样式*/
.location_box{
  position: fixed;
  right: 37px;
  bottom: 100px;
  z-index: 210;
  width: 45px;
  height: 128px;
  background: #fff;
  -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  border-radius: 24px;
}
.location_box ul li{
  list-style-type: none
}
.location_box ul li .item{
  display: block;
  width: 45px;
  height: 45px;
  text-align: center;
}
.location_box ul li .searchbutton{
  color: #333;
  margin-top: 5px;
  border: none;
}
.location_box ul li .mapbutton{
  color: #333;
  border: none;
}
.location_box ul li .qqbutton{
  color: #333;
  border: none;
  margin-top: -5px;
}
</style>